import './index.scss'
import {View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect, useState} from 'react'
import {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {devControllStore} from './model'
import {uSelectDevControl} from '@/api/setting'
import {ControllBtn} from './componentss'
import Taro from '@tarojs/taro'

const Devcontroll = () => {
  let router = useRouter()
  const {updatePageQuery, clearPageQuery, pageQuery} =
    useContext(devControllStore)

  const [dataSource, setDataSource] = useState<Setting.DevControll[]>([])

  function updatePageDataSource() {
    if (!pageQuery.devId) return
    uSelectDevControl({
      devId: pageQuery.devId
    })
      .then(res => {
        setDataSource(res.data)
      })
      .catch(err => {
        setDataSource([])
      })
  }

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Devcontroll useEffect dataSource', dataSource)
    Taro.showLoading({
      title: '加载中'
    })
    setTimeout(()=>{
      Taro.hideLoading()
    },2000)
  }, [dataSource])

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Devcontroll useEffect')
    updatePageDataSource()
  }, [pageQuery])
  // 对应 onShow
  useDidShow(() => {
    console.log('Devcontroll useDidShow')
    updatePageQuery(router.params)
    updatePageDataSource()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Devcontroll useDidHide')
    clearPageQuery()
  })

  function setRainwaterCheckedFunc(){
    setRainwaterChecked(!rainwaterChecked)
  }

  const [rainwaterChecked,setRainwaterChecked] = useState(false)


  return (
    <View className="container bg-xx_bg">
      <View className="hanzi text-16 font-bold mt-23 mb-14 px-16">
        功能控制
      </View>
      <View className="hanzi text-14 text-xx_text mb-14 px-16">
        点击下面的按钮对设备发送相关指令，对设备进行远程操控
      </View>
      <View className="p-16 grid grid-cols-2 gap-x-15 gap-y-16">
        {dataSource.map(controll => (
          <ControllBtn controll={controll} rainwaterChecked={rainwaterChecked} setRainwaterCheckedFunc={setRainwaterCheckedFunc}></ControllBtn>
        ))}
      </View>
    </View>
  )
}
export default observer(Devcontroll)
